<template>
  <img :src="symbolId" :style="iconStyle" alt="icon" />
</template>

<script setup>
  import { computed } from 'vue';
  import aiUpload from '@/assets/ai/upload.svg';
  import aiBack from '@/assets/ai/back.svg';
  import aiUploadPro from '@/assets/ai/upload-pro.svg';
  import aiDetailImg from '@/assets/ai/detail/img.svg';
  import aiDetailEdit from '@/assets/ai/detail/edit.svg';
  import aiDetailHd from '@/assets/ai/detail/hd.svg';
  import aiImageError from '@/assets/ai/image-error.svg';
  import aiFeedDownload from '@/assets/ai/feed-download.svg';
  import aiFeedPost from '@/assets/ai/feed-post.svg';
  import aiFeedImg2 from '@/assets/ai/feed-img2.svg';
  import aiFeedEdit from '@/assets/ai/feed-edit.svg';
  import aiFeedHd from '@/assets/ai/feed-hd.svg';
  import aiPost from '@/assets/ai/post.svg';
  import aiClose from '@/assets/ai/close.svg';
  import aiPostSuccess from '@/assets/ai/post-success.svg';
  import aiReselect from '@/assets/ai/reselect.svg';

  const iconMap = {
    'ai-upload': aiUpload,
    'ai-back': aiBack,
    'ai-upload-pro': aiUploadPro,
    'ai-detail-img': aiDetailImg,
    'ai-detail-edit': aiDetailEdit,
    'ai-detail-hd': aiDetailHd,
    'ai-image-error': aiImageError,
    'ai-feed-download': aiFeedDownload,
    'ai-feed-post': aiFeedPost,
    'ai-feed-img2': aiFeedImg2,
    'ai-feed-edit': aiFeedEdit,
    'ai-feed-hd': aiFeedHd,
    'ai-post': aiPost,
    'ai-close': aiClose,
    'ai-post-success': aiPostSuccess,
    'ai-reselect': aiReselect,
  };

  const props = defineProps({
    // 图标名称（不包含.svg后缀）
    name: {
      type: String,
      required: true,
    },
    // 图标前缀，默认为 icon
    prefix: {
      type: String,
      default: 'icon',
    },
    // 图标大小（同时设置宽高）
    size: {
      type: [String, Number],
      default: 24,
    },
    // 单独设置宽度
    width: {
      type: [String, Number],
      default: null,
    },
    // 单独设置高度
    height: {
      type: [String, Number],
      default: null,
    },
    // 图标颜色
    color: {
      type: String,
      default: '',
    },
  });

  const symbolId = computed(() => {
    // 对于普通名称，直接添加.svg后缀
    return iconMap[props.name] || '';
  });

  // 图标样式
  const iconStyle = computed(() => ({
    width: props.width !== null ? `${props.width}px` : `${props.size}px`,
    height: props.height !== null ? `${props.height}px` : `${props.size}px`,
    color: props.color,
  }));
</script>

<style lang="scss" scoped>
  .svg-icon {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    outline: none;
  }
</style>
